﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Visifire Test Page</title>
    <script type="text/javascript" src="Visifire.js"></script>
    <style type="text/css">
        
        .style1
        {
            text-align: center;
            width: 5px;
        }
        .style2
        {
            width: 113px;
        }
        .style3
        {
            width: 79px;
        }
        .style4
        {
            height: 2px;
        }
        
    </style>
</head>
    
<body>

    <div id="VisifireChart0" >

        <script type="text/javascript">
            
            var chart;  // A global chart variable
            
            // Create Visifire object
            var vChart = new Visifire('ClientBin/SL.Visifire.Charts.xap', "MyChart", 500, 300, "white", true);
            
            // vChart1.setLogLevel(0); // If you want to disable logging.
            
            var chartXml = '<vc:Chart ScrollingEnabled="true" View3D="true" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" AnimationEnabled="False" BorderThickness="0.5" Background="White" BorderBrush="Black" Padding="3">'
               + '     <vc:Chart.Titles>'
               + '         <vc:Title Text="Visifire Title"/>'
               + '     </vc:Chart.Titles>'
               + '     <vc:Chart.Series>'
               + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
               + '             <vc:DataSeries.DataPoints>'
               + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
               + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
               + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
               + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
               + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
               + '             </vc:DataSeries.DataPoints>'
               + '         </vc:DataSeries>'
               + '     </vc:Chart.Series>'
               + ' </vc:Chart>';
            
            // Set Chart XML
            vChart.setDataXml(chartXml);

            /* 
                On preload event, array of charts is received as event arguments.  
                Events can be can attached to chart elements. And required customization can be done here.
            */
            vChart.loaded = function(args)
            {
                chart = args[0];   // Chart reference.
                timer();
            }
            
            // Render chart
            vChart.render("VisifireChart0");

            var dataPointIndex = 0;
            
            // Function to update YValue property of a DataPoint
            function updateYValue(newValue, dataPointIndex)
            {   
                if (chart != null)
                {
                    try 
                       {
                         for (var i = 0; i < chart.Series[0].DataPoints.length; i++)
                            chart.Series[0].DataPoints[dataPointIndex].SetPropertyFromJs("YValue", newValue);
                       }
                     
                     catch (e)
                     {
                        alert(e);
                     }
                }
            };
            
            function timer()
            {
                updateYValue(Math.abs(Math.random() * 100 - 10 * dataPointIndex), dataPointIndex++);
                dataPointIndex = (dataPointIndex > 4) ? 0 : dataPointIndex;
                setTimeout(timer, 1000);
            };
            
        </script>
    </div>
   
</body>

</html>
